<script lang="ts" setup>
import {formatDate_1} from "@/utils/time";
import {ref, watch} from "vue";
import {IMessage} from "@/components/aw-message/message";
import type {UploadImageDTO} from "@/types/upload";
import {handleCancelImageApi, handleDelImageApi} from "@/api/upload";

const props = withDefaults(defineProps<{
  uploadList: UploadImageDTO[]
}>(), {
  uploadList: () => []
})

const {windowWidth} = uni.getSystemInfoSync()

const emit = defineEmits<{
  delete: [id: number],
  cancel: [id: number]
}>()
const isNoData = ref(false)

watch(props, () => {
  isNoData.value = props.uploadList.length <= 0
})
// 点击动物图片进入详情页
const goDetail = (item: UploadImageDTO) => {
  if (item.statusAnimal !== 1 || item.statusAudit !== 1) {
    return
  }
  uni.getImageInfo({
    src: item.images[0].url,
    success: (res) => {
      const height = windowWidth / res.width * res.height
      uni.navigateTo({
        url: '/subPkg/picDetail/picDetail?id=' + item.id + '&cover=' + item.images[0].url + '&height=' + height
      })
    }
  })
}
//用户手动取消上传
const cancelPopup = ref() // 取消弹框
const delPopup = ref() // 删除弹框
const currentId = ref() //  当前取消的id
const currentAuditId = ref()

/**
 * 用户点击取消
 * @param item
 * @param index
 */
const handleUserCancelUpload = (item: UploadImageDTO, index: number) => {
  currentId.value = item.id
  currentImage.value = item
  // cancelPopup.value.open()
  emit('cancel', item.id)
}
/**
 * 用户确定取消
 */
const onConfirmCancel = async () => {
  handleCancelImageApi(currentId.value).then(res => {
    if (res.code !== '1') {
      IMessage({
        content: res.message || "系统繁忙",
        type: "error",
        showIcon: true
      })
    } else {
      // 修改成功，修改当前状态
      props.uploadList.forEach((item, index) => {
        if (item.id === currentId.value) {
          props.uploadList[index].status = 3
        }
      })
      IMessage({
        content: "已取消上传",
        type: "success",
        showIcon: true
      })
    }
  })
}
/**
 * 删除
 * @param item
 */
const handleUserDelUpload = (item: UploadImageDTO) => {
  currentId.value = item.id
  checkDel.value = '确认删除'
  currentImage.value = item
  emit('delete', currentId.value)
}
// 确认删除
const checkDel = ref('')
const onConfirmDel = async (value: string) => {
  if (value !== checkDel.value) {
    return uni.showToast({
      title: '删除失败！请正确输入',
      icon: 'none'
    })
  }
  await handleDelImageApi(currentImage.value)
  // 删除
  IMessage({
    content: '已删除该数据',
    type: 'success',
    showIcon: true
  })
}

// 当前点击对象
const currentImage = ref<UploadImageDTO>({} as UploadImageDTO)

const handleUserShare = (index: number) => {
  uni.showToast({
    title: '已复制链接',
    icon: 'none'
  })
}

const rePopup = ref()
const handleUserRe_Upload = (index: number) => {
  // 重新上传
  uni.showToast({
    title: "图集类暂不支持重新上传",
    icon: 'none',
    duration: 2000
  })
}

/**
 * 暴露弹窗对应方法
 */
defineExpose({
  onConfirmCancel,
  onConfirmDel
})
</script>

<template>
  <view v-if="uploadList?.length>0" class="audit-list">
    <view v-for="(item,index) in uploadList" :key="item" class="audit-list-item">
      <view class="item-top" @click="goDetail(item)">
        <view class="flex flex-wrap" style="min-height: 220rpx;gap: 10px;width: 100vw;padding: 0 3% 0 3%">
          <view v-for="img in item.images" :key="item.id" style="width: 47%">
            <uv-image :src="img.url" height="120px" mode="aspectFill" radius="20rpx" width="100%">
              <template v-slot:error>
                <image mode="aspectFit" src="/static/error-img.png" style="height: 90px;width: 120px"></image>
              </template>
            </uv-image>
          </view>
        </view>
        <view class="flex flex-wrap margin-left-sm" style="gap: 10px;width: 100%">
          <text v-for="tag in item.tags.split(',')" :key="tag" class="cu-tag round">
            {{ tag }}
          </text>
        </view>
        <view class="text-gray padding-left-sm" style="align-self: flex-start">
          {{ formatDate_1(Date.parse(item.createTime)) }}
        </view>
      </view>
      <view class="item-center">
        <view v-if="item.status===3" class="cu-tag round status-cancel">已取消</view>
        <view v-else>
          <view v-if="item.statusAudit===1&&item.statusAnimal===1" class="cu-tag round status-success">已通过</view>
          <view v-else-if="item.statusAnimal===2&&item.statusAudit===2" class="cu-tag round status-error">未通过</view>
          <view v-else class="cu-tag round status-pending">待审核</view>
        </view>

      </view>
      <view class="item-bottom ">
        <view v-if="item.status===3" class="flex justify-center align-center" style="gap: 10px">
          <view class="cu-btn text-gray radius cuIcon-refresh" @click="handleUserRe_Upload(index)">重新上传</view>
          <view class="cu-btn  bg-gradual-red radius cuIcon-delete" @click="handleUserDelUpload(item)">删除</view>
        </view>
        <view v-else>
          <view v-if="(item.statusAudit===2&&item.statusAnimal===1)||(item.statusAudit===1&&item.statusAnimal===2)"
                class="item-bottom-item flex justify-center align-center">
            <view class="cu-btn text-gray radius" @click="handleUserCancelUpload(item,index)">取消上传</view>
          </view>
          <view v-if="item.statusAudit===1&&item.statusAnimal===1" class="flex justify-center align-center"
                style="gap: 10px">
            <view class="cu-btn  bg-gradual-awGreen radius cuIcon-share" @click="handleUserShare(index)">分享</view>
            <view class="cu-btn  bg-gradual-red radius cuIcon-delete" @click="handleUserDelUpload(item)">删除</view>
          </view>
          <view v-if="item.statusAnimal===2&&item.statusAudit===2" class="flex justify-center align-center"
                style="gap: 10px">
            <view class="cu-btn text-gray radius cuIcon-refresh" @click="handleUserRe_Upload(index)">重新上传</view>
            <view class="cu-btn  bg-gradual-red radius cuIcon-delete" @click="handleUserDelUpload(item)">删除</view>
          </view>
        </view>
      </view>
    </view>
    <view class="text-gray flex justify-center margin-top-sm padding-bottom-lg" style="width: 100%">
      暂无更多数据~(≧∇≦)ﾉ
    </view>
  </view>


  <uni-popup ref="rePopup" type="center">
    <uni-popup-dialog cancel-text="手滑了" confirm-text="取消上传"
                      content="提示"
                      title="确定取消上传"
                      type="info" @confirm="">
    </uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="delPopup" type="center">
    <uni-popup-dialog :placeholder="'请输入：'+checkDel" cancel-text="手滑了"
                      confirm-text="删除"
                      content="提示删除后的数据不可找回！！！"
                      mode="input"
                      title="确定删除上传数据"
                      type="error" @confirm="onConfirmDel">
    </uni-popup-dialog>
  </uni-popup>

</template>

<style lang="scss" scoped>
.audit-list {
  margin-top: 20rpx;
  width: 100%;
  background: #f1f1f1;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  &-item {
    width: 100%;
    min-height: 150rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .item-top {
      width: 100%;
      flex: 6;
      min-height: 220rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 10rpx 0rpx;
      //align-items: center;
      gap: 10px;
    }

    .item-center {
      width: 100%;
      flex: 3;
      border-bottom: #e6e6e6 1px solid;
      border-top: #e6e6e6 1px solid;
      min-height: 80rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-between;
      //margin: 10px 0;
    }

    .item-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      width: 100%;
      flex: 1;
      min-height: 80rpx;
      padding: 10rpx 20rpx;

      &-item {
        gap: 10px;
      }
    }
  }
}

.detail {
  input {
    flex: 1;
  }
}

.status-pending {
  color: #E6A23C;
  background-color: #FFF6E6 !important;
}

.status-success {
  color: #39c5bb;
  background-color: #EBF9F8 !important;
}

.status-error {
  color: #F56C6C;
  background-color: #FEF0F0 !important;
}

.status-cancel {
  color: #909399;
  background-color: #F4F4F5 !important;
}

.audit-desc {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.re-input input {
  border-bottom: #e6e6e6 1px solid !important;
  caret-color: #39c5bb !important;
}
</style>